<?php
pr($this->webroot);
?>

<div id="jqplot" style="height:400px;width:400px; "></div>

<div id="chartdiv" style="height:400px;width:400px; "></div>


<canvas id="chart_js" width="400" height="400"></canvas>

<script>
	$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
	{ title:'Exponential Line',
	  axes:{yaxis:{min:-10, max:240}},
	  series:[{color:'#5FAB78'}]
	});

	$(document).ready(function(){
	  // Our ajax data renderer which here retrieves a text file.
	  // it could contact any source and pull data, however.
	  // The options argument isn't used in this renderer.
	  // var ajaxDataRenderer = function(url, plot, options) {
	    // var ret = null;
	    // $.ajax({
	      // // have to use synchronous here, else the function 
	      // // will return before the data is fetched
	      // async: false,
	      // url: url,
	      // dataType:"json",
	      // success: function(data) {
	        // ret = data;
	      // }
	    // });
	    // return ret;
	  // };
	 
	  // The url for our json data
	  var jsonurl = <?php $this->webroot; ?>"draw/TEST";
	  var values = ajaxDataRenderer(jsonurl);
	  loadChart('jqplot','jqplot', values.data);
	  
		// Chart JS
		//Get the context of the canvas element we want to select
		var data = {
			labels : ["","",""],
			bezierCurve : false,
			datasetFill : false,
			animation : false,
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
			scaleLineWidth : 3,
					data : values[0]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : values[1]
				}
			]
		}
		var ctx = document.getElementById("chart_js").getContext("2d");
		var myNewChart = new Chart(ctx).Line(data);
	});


</script>